<template>
  <div class="login">
    <div class="left_part fl">
    </div>
    <div class="right_part fl">
      <div class="login_box">
        <h3 class="login_txt">登录</h3>

        <el-form  ref="loginForm" :rules="rules" :model="loginData" class="loginForm">
          <el-form-item prop="accountName">
            <el-input v-model="loginData.accountName" placeholder="请输入账号/用户名"></el-input>
          </el-form-item>
          <el-form-item prop="accountPassword" >
            <el-input v-model="loginData.accountPassword" @keyup.enter.native="loginSubmit('loginForm')"  type="password" placeholder="请输入密码"></el-input>
          </el-form-item>
        </el-form>

        <div class="btn_box">
          <!-- <span class="fl forget_txt">忘记密码?</span> -->
          <div class="fr banma_btn" @click="loginSubmit('loginForm')">登录</div>
          <div class="clear"></div>
        </div>

      </div>
    </div>
    <div class="clear"></div>
  </div>
</template>



<script>
import {
  createNamespacedHelpers,
  mapMutations
} from "vuex";
let {
  mapState,
  mapGetters,
  mapActions
} = createNamespacedHelpers("adminBasic");

export default {
  name: 'login',
  data() {
    return {
      loginData: {
        accountName: '',
        accountPassword: '',
      },
      rules: {
        accountName: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          // { min: 4,  message: '用户名至少4个字符', trigger: 'blur' }
        ],
        accountPassword: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, max: 12, message: '密码长度在 6 到 12 个字符', trigger: 'blur' }
        ],
      }
    }
  },

  methods: {
    ...mapActions([
      "formGet",
      "post"
    ]),
    ...mapMutations([
      "updateInfo"
    ]),

    loginSubmit(formName) {

      let data = this.loginData;
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.post({
            API: 'login',
            data: data
          }).then(res => {
            console.log(res);
            this.$message.success('登录成功');
            sessionStorage.setItem('jwtAuth', res.jwtAuth);
            sessionStorage.setItem('author_token', res.author_token);

            this.$router.push({
              name: 'home',
            })
          }).catch(err => {
            this.$message.error(err)
          })
        } else {
          return false;
        }
      });
      
    }
  }

}
</script> 


<style scoped>

.login {
  width: 100%;
  height: 100%;
}

.login .left_part {
  width: 55%;
  height: 100%;
  background: url('../../../assets/img/login_bg.png') center 0 no-repeat;
  background-size: cover;
}

.login .right_part {
  width: 45%;
  position: relative;
  height: 100%;
}

.login .banma_btn {
  width: 88px;
  height: 30px;
  line-height: 30px;
  color: #fff;
  cursor: pointer;
  background: #FC8434;
}

.login .login_box {   
  padding: 0 18%;
  position: absolute;
  transform: translateY(-50%);
  top: 45%;
  width: 100%;
  box-sizing: border-box;
}
.login .login_box .login_txt {
  font-size: 24px;
  color: #333333;
  font-weight:500;
  letter-spacing: 2px;
  margin-bottom: 30px;
}

.login .forget_txt {
  color: #C0C4CC;
  font-size: 12px;
  cursor: pointer;
  line-height: 32px;
  display: inline-block;
  margin-left: 6px;
}

</style>